<template>
    <div class="fixedBox">
        <div class="exchangeCon" @click="returnEvent" v-show="!successShow">
            <div class="exchangeTit"><b>兑换详情</b><i @click="hidden" class="iconfont icon-shanchu"></i></div>
            <div class="exchangeTit2 sm_font">
                <img v-lazy="param.usrPicUrl"><span class="exchange_name">{{param.usrName}}</span>
                <span class="right">还剩{{param.sellNum}}张</span>
            </div>
            <div class="exchange_bg">
                <div class="yunCurCon">
                    <span>{{price}}</span>芸券
                </div>
                <div class="yunCurConTop">
                  <div class="couponDiv">
                    <coupon-denomination :item="param"></coupon-denomination>
                  </div>
                  <div class="exchange_name2"><b>{{param.couponName}}</b></div>
                    <p class="star_con">
                      <star :couponComScore="couponParam.comScore"></star>
                      <span class="color_gray_03 sm_font">&nbsp;&nbsp;{{comScore}}条</span>
                    </p>
                  </div>
                <div class="exchangeTit3">
                    <span class="right">已使用 {{param.usednum}}</span>
                    <span>已出售 {{param.soldnum}}</span>
                </div>
            </div>

            <div class="xuzhi" @click="xzShow">
                <i class="iconfont right" v-bind:class=" xuzhi ? 'icon-down' : 'icon-iconfontunfold' "></i>
                使用须知
            </div>
            <div class="coupon_dtl_instr" v-show="!xuzhi">
                <ul>
                    <li v-if="scpoe"><span>{{scpoe + extra}}</span></li>
                    <li><span>有效期{{couponParam.validatyBegin|strDate(3)}}至{{couponParam.validatyEnd|strDate(3)}}</span></li>
                    <li v-if="couponParam.disableDate"><span>{{couponParam.disableDate|businessDay}}不可以使用</span></li>
                    <li><span>使用时间：{{userTime}}</span></li>
                    <li v-if="couponParam.restricted"><span>满{{couponParam.restricted}}元可使用</span></li>
                </ul>
            </div>
            <div class="coupon_dtl_instr2" v-show="!xuzhi">
                <ul>
                    <li v-if="diejia"><i class="iconfont icon-kediejiashiyong-"></i>可叠加使用{{couponParam.useNum}}张</li>
                    <li v-if="gongtong"><i class="iconfont icon-keyuqitadianziquangongtongshiyong-"></i>可与其他电子券同时使用</li>
                    <li style="margin-left: 1.4rem;"><i class="iconfont icon-buzhaolingbuduixian-"></i>不找零不兑现</li>
                </ul>
            </div>

            <div class="exchange_num_add borderBt">
                <div class="exchang_bg2">
                    <div class="iconBox2">
                        <span @click="reduce"><i class="iconfont icon-jianshao-" @click="countEvent('minus')"></i></span>
                        <input type="text"  v-model="exchangeNum">
                        <span @click="add"><i class="iconfont icon-zengjia-" @click="countEvent('add')"></i></span>
                    </div>
                    兑换数量
                </div>
            </div>
            <div class="whiteBg card_exchangebox" @click="showCouponBox">
                <span>用券参与兑换</span>
                <i class="icon iconfont icon-right"></i>
            </div>
            <div class="heji">
                <div class="heji_btn" @click="exchangeBtn">确认兑换</div>
                <div class="total2">
                    <p class="total_all md_s_font"><i class="md_s_font color_gray_02">合计：</i><span class="md_l_font"> {{price*exchangeNum || ''}}</span> <span class="color_ec md_s_font">芸券</span></p>
                </div>
            </div>
        </div>
        <!--兑换成功-->
        <div class="exchangeCon" v-show="successShow" @click="returnEvent">
            <div class="exchange_success" style="position:inherit;">
                <div class="okImg"><img src="../../images/ok.gif"></div>
                <p>恭喜，兑换成功</p>
                <span>
                    <span v-show="couponParam.couponType=='cash'">代金券</span>
                    <span v-show="couponParam.couponType=='rebate'">折扣券</span>
                    <span v-show="couponParam.couponType=='voucher'">抵用券</span>
                    已经放入您的商券</span>
                <a @click="couponPayEvent">继续去付款</a>
            </div>
        </div>
        <useCardExchange v-if="couponBox" @isBack="turnOff(boxStatus)" @paySuccess="payed(status)" :buyCardInfo="buyCardInfo"></useCardExchange>
    </div>
</template>
<script>
    import getData from '../../service/getData.js'
    import getData4 from '../../service/getData4.js'
    import star from './star.vue'
    import { Toast,Indicator} from 'mint-ui'
    import {mapState } from 'vuex'
    import useCardExchange from './useCardExchange.vue'
    export default {
        data:function(){
            return{
                scpoe:'',
                extra:'',
                userTime:'',
                diejia:'',
                gongtong:'',
                couponParam:'',
				comScore:'',
                xuzhi:true,
                exchangeNum:1,
                fee:'',
                feeArray:[],
                successShow:false,
                myValuation:'',//小云出售价格
                price:'', //单价
                jump:true,
                couponBox:false,
                allPayNum:'',
                buyCardInfo:{},
            }
        },
        props:{
            exchageShow:{
                default:false,
                type:Boolean
            },
            param:{

            }
        },
        components:{
            // cardImg,
            star,
            useCardExchange
        },
        computed:{
            ...mapState({
                userInfo:state => state.user.userInfo,
            }),
        },
        created:function(){
        	console.log(this.$route.query.exCardInfo)
            let me =this;
            //计算出售价格
            if(me.param.usrId == 1){
                me.myValuation = ' ';//防止计算缓慢
                getData.computePrice({method:'post',mchtId:me.param.mchtId,couponId:me.param.couponId}).then(rep => {
                    me.myValuation =parseInt(rep.content.valuation);
//                    me.param.valuation = JSON.parse(JSON.stringify(parseInt(rep.content.valuation)));
                    me.price = parseInt(rep.content.valuation);
                })
            }else{
                me.price = me.param.valuation;
            }

            //
            getData4.getDishType({mchtId:me.param.mchtId}).then(data => {
                var scpoeList = data.content.lowTypeNameList;
                console.log(scpoeList)
                getData.getCouponInfo({"method":'post',data:{"couponId":me.param.couponId,"mchtId":me.param.mchtId,"seqNo":me.param.id,"usrId":me.param.usrId, "usrPicId":me.param.usrPicId}}).then(rep => {
                    rep.content.couponId = me.param.couponId;
                    me.couponParam = rep.content;
                    console.log(rep);
                    me.comScore=rep.content.comScore
                    if(rep.content){
                        me.diejia = rep.content.useRule.indexOf("M") >=0;
                        me.gongtong = rep.content.useRule.indexOf("D") >=0;
                        me.userTime = rep.content.useTime.split(",").join("-");
                        if(rep.content.scpoe.indexOf("T") >=0){
                            me.extra = "不可用"
                        }else{
                            me.extra = "可用"
                        }
                        //获取商户可用或非可用菜类列表
                        let scpoe = rep.content.scpoe.substr(1,rep.content.scpoe.length+1).split(",")
                        let type =[];
                        scpoe.find(data => {
                            scpoeList.forEach(value => {
                                if(value.typeId == data){
                                    type.push(value.typeName);
                                }
                            })
                            me.scpoe = type.join("、")
                        })
                    }
                })
            });


        },
        methods:{
            //券换券兑换成功后隐藏换券列表，弹出兑换成功框
            payed(status){
                this.couponBox = status;
                this.successShow = true;
            },
            //控制couponBox的弹出
            turnOff(boxStatus){
                this.couponBox = boxStatus;
            },
            showCouponBox(){
                if(this.jump){
                    this.couponBox = true;
                    this.jump = false;
                    this.allPayNum=this.price * this.exchangeNum;
                }else{
                    this.couponBox = true;
                    this.jump = true;
                    this.allPayNum=this.price * this.exchangeNum;
                }
                this.buyCardInfo={
                    couponId : this.param.couponId,
                    buyCardNum : this.exchangeNum,
                    ownerId : this.param.usrId,
                    seqNo : this.param.id,
                    allPayNum : this.allPayNum,
                    buyCardMchtId : this.param.mchtId,
                    pathType:'tuijian'
                }
            },
            countEvent:function(str,index){
                if(str == 'add'){

                }else if(str == 'minus'){

                }
            },
            xzShow:function(){
                this.xuzhi = this.xuzhi ? false : true;
            },
            exchangeEvent:function(){

            },
            add:function(){
                if(this.exchangeNum == this.param.sellNum){
                    return
                }
                this.exchangeNum++;
            },
            reduce:function(){
                if (this.exchangeNum>=2) {
                    this.exchangeNum--;
                }
            },
            hidden:function(){
                this.$emit("hiddenExc",'hidden')
            },
            exchangeBtn:function(){
                let me = this;
                console.info(me.myValuation);
                if(me.myValuation && typeof me.myValuation != 'number'){
                    Toast({
                        message: '价格计算中，请稍等',
                        duration: 1000
                    });
                    return
                }
                if(this.exchangeNum > this.param.sellNum){
                    Toast({
                        message: '购买张数大于出售张数',
                        duration: 1000
                    });
                    return
                }
                if(this.exchangeNum <= 0){
                    Toast({
                        message: '请正确输入购买张数',
                        duration: 1000
                    });
                    return
                }

                // Indicator.open('加载中...');
                me.$store.commit('changeState', true)

                getData.buyCoupon({'method':'post',
                    data:{
                        couponId:me.param.couponId,
                        exchangeCoupon: {}, // 券换券参数
                          mchtId:me.param.mchtId.toString(),
                           seqNo:me.param.id,
                             num:me.exchangeNum,
                           owner:me.param.usrId,
                          yunCur:me.price
                    }
              },me.userInfo.usrId).then(rep => {
                    if(rep.respCode == '00'){
                    	console.log(rep)
                        me.successShow = true;

                    }else{
                        Toast({
                            message: rep.errorInfo,
                            duration: 1000
                        });
                    }
                })
            },
            returnEvent(){
                event.stopPropagation();
            },
            couponPayEvent(){
              this.$store.commit("coupon_pay",true);
              this.$emit('goOnPay')
              // this.$emit("eventP",'hidden')
              // window.location.reload();
            }
        }
    }
</script>
<style scoped>
    /*.exchange_name{float: left;margin: .1rem 0 0 .2rem;}*/
    .exchange_bg{background-color: #f8f8f8;margin:0 .667rem;}
    .exchangeTit2{height: 2.4rem;line-height: 2.4rem;padding:0 .667rem;color:#666; overflow: hidden;}
    .exchangeTit2 img{width: 1.4rem;margin-right: 0.5rem;vertical-align: middle;}
    .card_exchangebox i{position:absolute;right:.667rem;}
    .yunCurConTop, .exchangeTit3{overflow: hidden;}
    .yunCurConTop {margin-left: 0.6rem;}
    .exchangeTit3{line-height: 2rem;height: 2rem;border-top: 1px solid #e8e8e8;margin-top: .6rem;font-size:.8rem;color:#999;padding:0 .667rem;}
    .card_exchangebox{
        height: 3.6rem;
        color: #333;
        border-top: 1px solid #f1f1f1;
        padding: 0 .667rem;
        line-height: 3.6rem;
        position: relative;}
    .exchangeTit i{float:right;}
    .exchange_name2{color:#333;overflow: hidden;padding:.667rem 0 0.5rem .3rem;}
    .exchange_name2::before,.xuzhi::before{
      content: "";
      display: block;
      clear: both;
    }
    .star_con, .exchange_name2 {
      margin-left: 0.2rem;
    }
</style>
